<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/js/alertPop/common.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/alertPop/alertPopShow.js"></script>
    <script src="/js/common.js"></script>

    <script>
        /*评论页面*/
        $(function () {
            var commentId = getParams().id;
            var toUserId;
            var fromUserId = JSON.parse(sessionStorage.getItem("user")).id;
            $.get("/strategyComments/" + commentId, function (data) {
                console.log(data);
                toUserId = data.user.id;
                $(".row").renderValues(data, {
                    getHref: getHref
                });

                //给图标绑定点击事件 弹窗放大
                $(".comment-img img").click(function () {
                    var url = $(this).attr("src");
                    $(document).dialog({
                        titleShow: false,
                        content: '<img src="' + url + '" width="100%">'
                    });
                });
            })


            //当前页
            var currentPage = 1;
            //总页数
            var pages;
            //是否查询的标记
            var loading = false;
            //用户存储游记的数组容器
            var commentData = [];

            //查询方法
            function query() {
                //如果正在查询就不继续查了,退出
                if (loading) {
                    return;
                }
                //设置为查询状态
                loading = true;
                $.get("/strategyComments/" + commentId + "/secondaryComments",{currentPage:currentPage,pageSize:5}, function (data) {
                    console.log(data);
                    $.merge(commentData,data.list)
                    $(".secondaryComment").renderValues({list:commentData}, {
                        getHref: getHref
                    });
                    //当前页+1
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    loading=false;
                })
            }

            query();

            //滚动页面 触发事件 翻页
            $(window).scroll(function () {
                //判断是否滚动到底部了  窗口的高度+文档滚动的高度 大于等于 文档的高度
                if ($(window).height() + $(document).scrollTop() + 23>= $(document).height()) {
                    //如果当前页大于总页数就不查询了
                    if (currentPage <= pages) {
                        //查询
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });

            //点击添加评论按钮，增加二级评论
            $('.addYourComment').on('click', function () {
                var json = {};
                var html = "<textarea class='confirm_input' placeholder='请输入' style='width: 100%'>";
                popTipShow.confirm('回复', html, ['确 定', '取 消'],
                    function (e) {
                        //callback 处理按钮事件
                        var button = $(e.target).attr('class');
                        if (button == 'ok') {
                            this.hide();
                            //按下确定按钮执行的操作
                            //todo ....
                            json.content = $(".confirm_input").val();
                            json["toUser.id"] = toUserId;
                            json["fromUser.id"] = fromUserId;
                            console.log(json);
                            $.post("/strategyComments/" + commentId + "/secondaryComments", json, function (data) {
                                if(data.success){
                                    window.location.reload();
                                }
                            })
                        }
                        if (button == 'cancel') {
                            this.hide();
                        }
                    }
                );
            });
        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">
    <div class="container ">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-url="/userProfiles.html?id=" render-fun="getHref" render-key="user.id">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
                <button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
            </div>
            <div class="col">
                <span class="comment-star" render-html="user.nickName"></span>
                <span class="comment-date" render-html="createTime"></span>
                <div class="comment-content">
                    <p render-html="content"></p>
                </div>
                <ul class="comment-img" render-loop="imgArr">
                    <li>
                        <img render-src="imgArr.self">
                    </li>
                </ul>

                <div class="comment-link">
                    <a data-url="/strategyCatalogs.html?id=" render-fun="getHref" render-key="strategy.id">
                        <img render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
                        <i class="fa fa-angle-right fa-2x"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span>0</span></div>
        <div class="p-2">赞<span>0</span></div>
    </div>
</div>


<!--二级评论-->
<div id="secondaryComment" class="secondaryComment">
    <div render-loop="list">
        <div class="row">
            <div class="col-1"></div>
            <div class="col-2 comment-head">
                <a data-url="/userProfiles.html?id=" render-key="list.fromUser.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="list.fromUser.headImgUrl" style="width: 40px">
                </a>
            </div>
            <div class="col">
                <a style="font-size: 10px;color: #61CAD0" render-html="list.fromUser.nickName"></a>
                <span>在</span>
                <span class="comment-date" render-html="list.creatTime"></span>
                <span class="strategyCommentBtn">回复了楼主</span>
                <div class="comment-content">
                    <p render-html="list.content"></p>
                </div>
                <hr>
                <div id="commentReplyBtn">
                    <div></div>
                </div>
            </div>
            <div class="col-1"></div>
        </div>
    </div>
</div>


<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="addYourComment"><i class="fa fa-commenting-o"></i> 添加你的评论</div>
        <div class="p-2"><i class="fa fa-star-o"></i> 收藏</div>
    </div>
</div>


</body>

</html>